// #1
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import type { ThunkAction, Action } from "@reduxjs/toolkit";
import counterReducer from "@/store/counterSlice";
import colorReducer from '@/store/colorSlice'
// #3
import storage from "redux-persist/lib/storage";
// #5
import { persistReducer, persistStore } from "redux-persist";
// #2
const rootReducer = combineReducers({
  counter: counterReducer,
  color: colorReducer,
});

// #4
const persistConfig = {
  key: "root",
  storage,
};

const store = configureStore({
  // #6
  reducer: persistReducer(persistConfig, rootReducer),
  // #7
  middleware(getDefaultMiddleware) {
    return getDefaultMiddleware({
      serializableCheck: false,
    });
  }
});

// #8
export const persistor = persistStore(store);

export default store;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<RT = void> = ThunkAction<
  RT,
  RootState,
  unknown,
  Action<string>
>;
